@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

* {
	font-family: 'Yanone Kaffeesatz', sans-serif;
}

body {
	background-image: url('/images/graph.jpg');
	background-position: 0% 0%;
	background-repeat: no-repeat;
}

body.questionnaire {
	background-image: none !important;
	background-color: white;
	margin-top: 20px;
}


body.variable-config {
	background-image: none !important;
	background-color: white;
	margin-top: 20px;
}

h1 {
	font-size: 3em;
	padding: 0;
	margin: 0em 0em 0em 0.2em;
}

header div.data {
	width: 420px;
	margin: 1.5em;
}

/*
	opacity:0.4;
	filter:alpha(opacity=40);
*/
header {
	height: 282px;
	background-image: url('/images/headerl-bg.png');
	background-position: 0% 0%;
	background-repeat: no-repeat;
	padding: 0;
	margin: 0;
}

section {
	width: 728px;
	margin: 0px auto 0px auto; 
	border: solid 1px #333;
	padding: 2em;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-webkit-box-shadow: 2px 2px 2px 2px rgba(6, 6, , 0.3);
	-moz-box-shadow: 2px 2px 2px 2px rgba(6, 6, , 0.3);
	box-shadow: 2px 2px 2px 2px rgba(6, 6, , 0.3);
	background: #fff;
}

.container {
	width: 100%;
	height: 100%;
	margin-top: 3em;
}

a.button { 	
    color: #eee; 
    text-transform: uppercase; 
    margin-top: 10px;
	text-decoration: none;
    background-color: #18a5cc;
    border: none;
	padding: 0.4em 1em;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8)); 
	background:  -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc); 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px; 
	border-radius: 4px;
    cursor:  pointer; 
}

a.button:hover { 		
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0a85a8), to(#18a5cc)); 
	background:  -moz-linear-gradient(25% 75% 90deg,#18a5cc, #0a85a8); #0a85a8
    cursor:  pointer; 
}

nav {
	margin-top: 3em;
	text-align: center;
}

fieldset.general {
	font-size: 1.5em;
	padding: 0;
	margin: 0em 0em 0em 0.3em;
	height: 100%;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	width:100%;
}

fieldset.variable-selection {
	width:90% !important;

}

fieldset.variable-configuration {
	width:90% !important;
	padding-bottom: 40px;
}

fieldset.methology-dashboard {
	
}

.survey-questionnaire{
	width: 100%;	
	
}


label {
	font-size: 1.2em;
	padding: 0;
	margin: 0em 0em 0em 0.2em;
}

footer {
	text-align: center;
	width: 100%;
	height: 100%;
	vertical-align: bottom;
	font-size: 1.2em;
}

section.survey-person {
	height: 400px !important;	
	vertical-align:middle !important;
	margin-top: 100px;
	
}


/**********************************************************************************************************************/
/**************************************		Questionnaire Styles	***************************************************/
/**********************************************************************************************************************/

.hr-separator {
	width:100%;
	margin-right:20px;
	margin-left:20px;
}

.input-label {
	font-size: 0.9em !important;
	padding: 0;
	margin: 0em 0em 0em 0.9em;
}

.text-input {
	width: 200px;
	vertical-align: middle;
	font-size: 0.7em;
	text-align: left;	
	float: right;
}

.error-container {
	vertical-align: middle;
	text-align: center;
	color: rgba(255,0,0,1);
	height: 100%;
}

.survey-container {
	width: 100%; 
	margin-right:auto;
	margin-left:auto;
	background-color: white;
	
}

.person-container {
	width: 50%;
	height: 100%;
	float: left;
}

.person-container-button {
	float: right;
}

.questions-container {
	width:100%;
}

.question-article {
	margin-left: 20px;	
	margin-right: 20px;	
	width: 90%;
}

.options-container {
	margin-top: 20px;
	margin-left: auto;	
	margin-right: auto;
	width: 90%;
}


.select-container-left {
	float:left;
}

.select-container-rigth {

}
.move-buttons-container {
	width: 100px;
	float:left;
	vertical-align: middle;
	height: 150px;
}

.option-list {
	height: 150px;
	background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #777777;
    color: #777777;
    font-size: 0.8em;
    margin: 4px 0 10px;
    padding: 5px;
    width: 220px;	
}


.question-label{
	
}

.hint-label {
	
}

.survey-submit-button {
	font-size: 0.8em;
	margin-right :15px;
}

.button-ctn{
	text-align: right;
	width: 100% !important;
	height: 50px;
}

.right-button {
	margin-right:auto;
	margin-left:auto;
	width:50px;
}

.left-button {
	margin-right:auto;
	margin-left:auto;
	width:50px;
}


.questionnaire-completed-section {
	margin-top: 80px;
}


.questionnaire-completed-fieldset {
	padding-top: 20px !important;
	padding-left: 20px !important;
	width: 90% !important;
}


.thanks-label {
	 margin-left: 0.2em;
}


.survey-errors-container{
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	vertical-align: middle;
	margin-left:auto;
	margin-right:auto;
	color: rgba(255,0,0,1);
	font-size: 1.8em;
}



/**********************************************************************************************************************/
/***************************************		Report Usage Styles	***************************************************/
/**********************************************************************************************************************/

.bold {
	font-style: oblique;
	font-size: 1.4em !important;	
}

.grey-label {
	font-size: 1.2em;
	padding: 0;
	margin: 0em 0em 0em 0.2em;
	color: #777777 !important;	
}


.var-selection-button{
	text-align: right;
	width: 97%;
	margin-top:27px;
	height: 50px;
}

.variables-container{
	margin-top: 20px;
	margin-left: 20px;
	margin-bottom: 10px;
	width: 50%;
	float:left;
}

.validity-errors-container{
	width: 40%;
	float: right;
	margin-top: 40px;
	vertical-align: middle;
	color: rgba(255,0,0,1);
}


.variables-list-section{
	
}

.project-configuration-section{
	margin-top:15px;
}

.project-configuration{
	
}

.input-validity-error{
	
}

.report-usage-section {
	margin-top:15px;
}

.person-list-section {
	
}

.person-list-container {

}


.generate-report-container{
	margin-top:40px;
	margin-left:20px;
	width: 40%;
	float:right;
}


.return-button-container {
	width:100%;
	height:50px;
	margin-left:auto;
	margin-right:auto;
}

.home-button {
	float:right;
	margin-right: 60px;
}

/**********************************************************************************************************************/
/***************************************		Static Pages Styles		***********************************************/
/**********************************************************************************************************************/
.timeout-container {
	margin-top: 100px;
}

.timeout-message {
	text-align: center;
	font-size: 1.4em !important;	
}

.site-400 {
	text-align: center;
	font-size: 1.4em;	
}

.site-500 {
	text-align: center;
	font-size: 1.4em;
	height:200px;
	width: 50%;	
	float: left;
}

.oompa-loompa-container {
	width: 35%;	
	height: 200px;
	margin-left:auto;
	margin-bottom: auto;
}

.oompa-loompa {
	width: 200px;
	height: 200px;	
}
